<html>

<head>
  <title>Lesson06 - React第六课之事件处理</title>
</head>

<body>
  <ul>
    <li>React中事件绑定属性采用驼峰式命名</li>
    <li>React中不能像传统的HTML一样使用 return false 来阻止默认行为；
      而必须使用 preventDefault() 函数来进行默认行为的阻止
    </li>
  </ul>
  <div id="app"></div>


  <script src="../lib/react.development.js"></script>
  <script src="../lib/react-dom.development.js"></script>
  <script src="../lib/babel.min.js"></script>
  <script type="text/babel">

    class EventLoader extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            isToggle: false
          }
          // this.handleClick = this.handleClick.bind(this);
        }
        
        handleClick() {
          alert('React中事件绑定属性采用驼峰式命名');
        }

        handleClickA = (e) => {
          e.preventDefault();
          alert('此时不会跳转到百度了');
          // return false;  // 此处无法阻止默认行为，网页依然会跳转到百度
        }

        handleToggle = () => {
          this.setState(preState => ({
            isToggle: !preState.isToggle
          }));
        }
        render() {
          return (
            <div>
              <button onClick={this.handleClick}>Click Me</button> <br/>
              <a href='https://www.baidu.com/'
                onClick={this.handleClickA}>百度一下</a> <br/>
              <button onClick={this.handleToggle}>切换开关</button>
              <span>{this.state.isToggle ? '打开' : '关闭'}</span>
            </div>
          );
        }
      }

      const appDom = document.getElementById('app');
      ReactDOM.render(<EventLoader />, appDom);
    </script>
</body>

</html>